<template>
  <ul class="fileTrees">
    <li>
      <span><i class="el-icon-document-copy"></i></span>
      <span @click="clickFolder(bizId,bizTypeName)">{{bizTypeName}}</span>
    </li>
    <li  @click="clickFolder(folder.id, folder.nodeName)"  v-for="(folder, index) in folders" :key="index">
      <span><i :class="folder.icon ? folder.icon : ''"></i></span>
      <span>{{folder.nodeName}}</span>
    </li>
  </ul>
</template>

<script>
  import FolderEventBust from '@/eventbus/FolderEventBus.js'
  import {docFolderFileApi} from '@/api/business/businessApi'
  export default {
    name: 'menuTree',
    props: {
      // 业务数据的id
      bizId: {
        type: String,
        default: '1'
      },
      // 业务数据的id
      bizType: {
        type: String,
        default: ''
      },
      // 业务数据名称
      bizTypeName: {
        type: String,
        default: ''
      },
      folders: {
       type: Array,
       default: function () {
          return [{
            nodeName: '',
            id: ''
          }]
        }
      },
      value: {
        type: [Array, String],
        default: null
      },
      disabled: {
        type: Boolean,
        default: false
      },
      defaultProps: {
        type: Object,
        default: function () {
          return {
            children: 'children',
            label: 'label'
          }
        }
      },
      options: {
        type: Object,
        default: function () {
          return {}
        }
      }
    },
    data () {
      return {
        datas: [
          {
            label: '全部文件',
            path: '/home',
            id: '1',
            icon: 'el-icon-document-copy'
          },
          {
            label: '程四姐视频剪辑',
            path: '/home',
            id: '2'
          },
          {
            label: '文件夹',
            path: '/file',
            id: '3'
          },
          {
            label: '孙敏校全集',
            path: '/home',
            id: '4'
          }
        ]
      }
    },
    created () {
      FolderEventBust.$on('changFolerEvent', () => {
         this.loadFolderData()
      })
      // this.selected = this.options
    },
    methods: {
      handleNodeClick (data) {
        console.log(data)
      },
     // 加载文件夹数据
      loadFolderData () {
        docFolderFileApi.getFolderList(this.bizId).then(ret => {
          this.folders = ret.data
          // this.folders.pop()
          // this.folders.map(file => {
          //   if (file.parentId === '0') {
          //     let newfile = JSON.parse(JSON.stringify(this.fileMode))
          //     newfile.id = file.id
          //     newfile.fileName = file.nodeName
          //     newfile.img = file.fileType
          //     newfile.fileSize = file.fileSize
          //     // 1：文件夹 2：文件
          //     newfile.isFolder = file.nodeType === '1'
          //     this.fileData.push(newfile)
          //   }
          // })
          // 排序
          this.folders.sort((f1, f2) => {
            return f1.fileName - f1.fileName
          })
        })
      },
      // 点击文件夹
      clickFolder (folderId, folderName) {
        this.loadFolderData()
        FolderEventBust.$emit('clickFolder', folderId, folderName)
      }
    },
    watch: {
      value (val) {
        this.selected = val
      },
      selected (val) {
        this.$emit('input', val)
      },
      bizType (val) {
        this.loadFolderData()
      },
      bizId: {
         handler (v) {
          this.folderId = v
          this.loadFolderData()
        },
        immediate: true
      }
    }
  }
</script>
<style lang="scss" scoped>
  .fileTrees{
    li {
      color: rgb(102, 102, 102);
      padding-left: 14px;
      cursor: pointer;
      line-height: 38px;
    }
    li span:first-child {
      display: inline-block;
      width: 20px;
      text-align: center;
      font-size: 16px;
    }
    li:hover {
      background: #DCE3E6;
    }
    li a .active {
      color: #3b8cff;
    }
  }
</style>
